import React, { useEffect, useState } from 'react'
import {
  VerticalAlignTopOutlined,
  DownOutlined
} from '@ant-design/icons';
import { Tabs, Select, Space, Dropdown, Switch, Input, Button, Table } from 'antd';
import type { TabsProps } from 'antd';
import '../../styles/manage.less'
import type { ColumnsType } from 'antd/es/table';
import { getGoods,getOne ,getCategory,getDelete} from "@/apis/goodsCategory";
import { history } from 'umi';


const { Search } = Input;
const onChange = (key: string) => {
  console.log(key);
};
type Props = {}
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  description: string;
}


const Manage = (props: Props) => {
  const [dataSource, setDataSource] = useState([])
  const [myArr,setMyArr] = useState<any[]>([])
  const [list, setList] = useState([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true },
])

const apply = () => {

}

const columns: ColumnsType<DataType> = [
  { title: '商品ID', dataIndex: '_id', key: '_id' },
  {
    title: '商品图', dataIndex: 'slider_image', key: 'slider_image', render: (slider_image) => {
      if (slider_image) {
        return <img className='img' src={slider_image}></img>
      }
    }
  },
  { title: '商品名称', dataIndex: 'title', key: 'title' },
  {
    title: '商品类型', dataIndex: 'type', key: 'type', render: () => {
      if ('1') {
        return '普通商品'
      }
    }
  },
  { title: '商品售价', dataIndex: 'freight', key: 'freight' },
  { title: '销量', dataIndex: 'sales', key: 'sales' },
  { title: '库存', dataIndex: 'stock', key: 'stock' },
  { title: '排序', dataIndex: 'sort', key: 'sort' },
  {
    title: '状态', dataIndex: 'state', key: 'state', render: (state) => {
      return <Space direction="vertical">
        <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={state} />
      </Space>
    }
  }, 
  {
      title: '操作', key: 'x', render: (data) => <div className='butTs'>
        <a onClick={() => updatModal(data)}>编辑</ a><a className='del' onClick={() => gotoDel(data)}>删除</ a>
      </div>,
    }
];
let data: [] = [];

const updatModal = (data: any) => {
   // console.log("data",data);
  
  }
  const gotoDel = async (_id: any) => {
   console.log("12333", _id);
   const res = await getDelete({ _id });
   console.log("res", res)
  }

const handleChange = async (value:string) => {
  const res = await getCategory({pid:value})
  console.log("555",res)
  setDataSource(res.data)
};
const onSearch = async (value: string) => {
  const res = await getCategory({title:value})
  console.log("666",res)
  setDataSource(res.data)
};
  useEffect(() => {
    fetchData(),fetData()
  }, [])
  useEffect(()=>{
    console.log(list);
    const arr = list.map((item:any) =>{
        return {value:item._id,label:item.title}
    })
    console.log('arr',arr);
    setMyArr(arr)
},[list])
const fetData = async () => {
  const res = await getOne()
  console.log("1234", res.data);
  setList(res.data);
}
  const fetchData = async () => {
    const res = await getGoods()
    setDataSource(res.data)
    data = res.data
    console.log("123", res);
  }
  const gotoAdd = () => {
    history.push('/home/addManage');
  }
  return (
    <div className='box'>
      <div className='model'>
        <div className='box'>
          <div className='up'>
            <div className='classify'>
              <span className='title'>商品分类：</span>
              <Space wrap>
                <Select
                  defaultValue=""
                  style={{ width: 220 }}
                  allowClear
                  onChange={handleChange}
                  options={myArr}
                />
              </Space>
            </div>
            <div className='search'>
              <span className='name'>商品搜索：</span>
              <Space direction="vertical">
                <Search placeholder="请输入商品名称/关键字/ID" onSearch={onSearch} enterButton />
              </Space>
            </div>
          </div>
        </div>
        <div className='button'>
          <Button type="primary" onClick={() => gotoAdd()}>+ 添加商品</Button>
          <Button className='buttonG'>商品采集</Button>
          <Button className='buttonB'>批量修改</Button>
          <Button className='buttonQ'><VerticalAlignTopOutlined />导出</Button>
        </div>
      </div>
      <Table className='table'
        pagination={{ defaultPageSize: 4 }}
        columns={columns}
        expandable={{
          expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,
          rowExpandable: (record) => record.name !== 'Not Expandable',
        }}
        dataSource={dataSource}
      />
    </div>
  )
}

export default Manage